<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-02-06 11:23:56
 * @LastEditTime: 2025-02-18 15:27:44
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \uniapp\src\pagesbaoxian\list.vue
-->
<template>
    <view class="bg-page ">
        <u-tabs class="base-tabs" :list="state.tabList" :is-scroll="true" v-model="current" @change="handleChange"   activeColor="var(--color-primary)" inactive-color="#606266" font-size="32"></u-tabs>
         <view class="page-list tabs  mt-[10px]  px-[10px]">
            <z-paging auto-show-back-to-top ref="paging" v-model="dataList" @query="queryList" :fixed="false"
                height="100%">
                <view class="  flex flex-row  flex-wrap justify-between items-center"  >
                    <view  @tap="toApply(item)" class="items-pic w-1/2 h-[477rpx] rounded-[16rpx]  pb-[10rpx] "  
                        v-for="(item, index) in dataList" :key="index">
                        <image
                            src="/static/images/home/goods.png"
                            class="w-full h-full rounded-[16rpx] "
                            mode="aspectFill"
                        ></image>
                    </view>
                </view>
            </z-paging>
        </view>
    </view>
</template>

<script setup lang="ts">
import { modelList,goodsList} from '@/api/repair'
import {onLoad,onShow, onPageScroll} from "@dcloudio/uni-app";
import {computed, reactive, ref, shallowRef} from 'vue'
import {useAppStore} from '@/stores/app'
import { useUserStore } from '@/stores/user'

const appStore = useAppStore()
const userStore = useUserStore()
const token = computed(() => userStore.token)
const mock_tabs = [{ name: '全部' }, { name: '双面保' }, { name: '延保' }, { name: '换修无忧' }, { name: '电池保' }, { name: '折叠保' }]

const current = ref<number>(0)
const paging = shallowRef<any>(null)
const dataList = ref<any[]>([])
const state = reactive({
    tabList: [{ name: '全部' }, { name: '双面保' }, { name: '延保' }, { name: '换修无忧' }, { name: '电池保' }, { name: '折叠保' }]
})
const mock_list = [
    {
        id:1,
        goods_name:'iPhone16碎屏保',
        goods_price:'5.00',
       expiration_date:'2020-05-05 20:05:05',
        goods_img:'/static/images/home/goods.png',
    },
    {
        id:2,
        goods_name:'iPhone15碎屏保',
        goods_price:'6.00',
       expiration_date:'2020-05-05 20:05:05',
        goods_img:'/static/images/home/goods.png',
    },
    {
        id:3,
        goods_name:'iPhone14碎屏保',
        goods_price:'7.00',
       expiration_date:'2020-05-05 20:05:05',
        goods_img:'/static/images/home/goods.png',   
    },{
        id:4,
        goods_name:'iPhone13碎屏保',
        goods_price:'8.00',
       expiration_date:'2020-05-05 20:05:05',
        goods_img:'/static/images/home/goods.png',
    },
    {
        id:5,
        goods_name:'iPhone12碎屏保',
        goods_price:'9.00',
       expiration_date:'2020-05-05 20:05:05',
        goods_img:'/static/images/home/goods.png',
    },
    {
        id:6,
        goods_name:'iPhone11碎屏保',
        goods_price:'15.00',
       expiration_date:'2020-05-05 20:05:05',
        goods_img:'/static/images/home/goods.png',
    }
]

const handleChange = (index: number) => {
    current.value = Number(index)
    paging.value.reload();
}

function   toApply(item: any) {
    uni.navigateTo({
        url: `/pagesbaoxian/apply?pageData=${encodeURIComponent(JSON.stringify(item))}`
    })
}
const queryList = async (page_no: number = 1, page_size: number = 10) => {
    try {
        const data = await goodsList({
            page_no,
            page_size,
            model_id: current.value
        })
        // console.log('data',data)
        paging.value.complete(data)
        // paging.value.complete(mock_list)
    } catch (e) {
        console.log('报错=>', e)
        paging.value.complete(false)
    }
}

// 机型列表
const init = async () => {
    // const data = await modelList({})
    // state.modeList = data;
}

onLoad(() => {  })
onShow(() => { 
    init()
 })

</script>

<style lang="scss" scoped>
.items-pic{
    &:nth-child(2n+1){
        padding-right:10rpx;
    }
     &:nth-child(2n){
        padding-left:10rpx;
    }
}
</style>
